/**
 * Created by wuhaiyang on 2017/4/13.
 */

import React, {Component} from 'react'

import {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
    Dimensions
} from 'react-native'

export default class ArticleItem extends Component {


    renderCombinationView(iconUrl, count) {
        return <View style={styles.combinationView}>
            <Image style={styles.img} source={iconUrl}/>
            <Text style={{color:'#cdcdcd',fontSize:10}}>{count}</Text>
        </View>
    }

    render() {
        let textWidth = Dimensions.get('window').width - 150
        return (
            <TouchableOpacity
                onPress={this.props.onItemClick}
            >
                <View style={styles.container}>
                    <Image style={styles.thumbnail} source={{uri:this.props.data.picUrl}}/>

                    <View style={styles.desContainer}>

                        <Text
                            allowFontScaling={true}
                            style={{fontSize:14,color:'#5E5E5E',width:textWidth}}>{this.props.data.title}</Text>

                        <Text
                            numberOfLines={2}
                            style={{fontSize:12,color:'#333',marginTop:5,width:textWidth}}>{this.props.data.description}</Text>

                        <View style={styles.linkCollection}>
                            <Text style={{color:'#21BA45',fontSize:10}}>丹露网</Text>
                            {this.renderCombinationView(require('../../res/img/icon_readcount.png'), this.props.data.readCount)}
                            {this.renderCombinationView(require('../../res/img/icon_love.png'), this.props.data.likeCount)}
                        </View>
                    </View>

                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 10,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 5,
        marginRight: 5,
        marginVertical: 3,
        borderWidth: 0.5,
        borderColor: '#dddddd',
        borderRadius: 3,
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 1,
        elevation: 2
    },
    thumbnail: {
        height: 80,
        width: 120,
    },
    desContainer: {
        marginLeft: 10,
        flexDirection: 'column',
    },
    linkCollection: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 7
    },
    img: {
        height: 12,
        width: 12
    },
    combinationView: {
        marginLeft: 8,
        flexDirection: 'row',
        alignItems: 'center'
    }
})